.wrapper {
  position: relative;
  margin-block: clamp(0px, 7vw, rem(80px));
  padding-bottom: 1rem;
}

.inner {
  position: relative;
  z-index: 1;
}

.dots {
  position: absolute;
  color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
  @media (max-width: $mantine-breakpoint-sm) {
    display: none;
  }
}

.dotsLeft {
  left: 0;
  top: 0;
}

.title {
  text-align: center;
  font-weight: 800;
  /* font-size: rem(40px); */
  letter-spacing: -1px;
  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
  margin-bottom: var(--mantine-spacing-xs);
  /* font-family: Greycliff CF, var(--mantine-font-family); */

  font-size: clamp(rem(35px), 4vw, rem(50px));
  /* Width of 35 chars explicitly chosen to fit "Open source metrics and monitoring for [...]" first line */
  width: min(30ch, 90vw);
  font-weight: 600;
  margin: 0 auto;
  margin-bottom: var(--mantine-spacing-xl);

  @media (max-width: $mantine-breakpoint-xs) {
    text-align: left;
  }
}

.highlight {
  color: var(--mantine-primary-color-6);
}

.description {
  text-align: center;
  font-size: clamp(
    var(--mantine-font-size-lg),
    2vw,
    calc(var(--mantine-font-size-xl) * 1.1)
  );
  width: min(60ch, 85vw);
  margin: 0 auto;
  margin-bottom: var(--mantine-spacing-xl);

  @media (max-width: $mantine-breakpoint-xs) {
    text-align: left;
    /* font-size: var(--mantine-font-size-md); */
  }
}

.buttons {
  /* transform: scale(clamp(1, calc(100vw / 1920), 1.2)); */
  transform: scale(calc(100vw / 1920)); /* Assume 1920 is your base width */
  transform-origin: top left;
}
